<!--
 @description: 创建公告表单
 @Author: chich
 @Date: 2021-04-26
-->
<template>
  <div>
    <edit-form :model="form" :fields="formFields" :rules="formRules" v-bind="formAttrs" ref="addForm">
      <template #item-yxqq>
        <div class="flex-box">
          <dg-date-picker
            v-model="time"
            :disabled="!!form.sfcx"
            type="datetimerange"
            range-separator="至"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            value-format="yyyyMMddHHmmss"
          >
          </dg-date-picker>
          <span class="flex-box__radio">
            <dg-radio v-model="form.sfcx" label="1">长效</dg-radio>
          </span>
        </div>
      </template>

      <template #item-jsdwdm>
        <div class="flex-box">
          <el-cascader
            style="width: 400px"
            :props="{ multiple: true, checkStrictly: true }"
            v-model="form.jsdwdm"
            :options="constant.BM_DEPT"
            :show-all-levels="false"
            :disabled="!!form.jsdwlx"
            clearable
            placeholder="请选择接收单位"
          />
          <!-- <dg-select
            style="width: 400px"
            v-model="form.jsdwdm"
            placeholder="请选择接收单位"
            :data="constant.BM_DEPT"
            :disabled="!!form.jsdwlx"
            clearable
            filterable
            multiple
          ></dg-select> -->

          <span class="flex-box__radio">
            <dg-radio-group v-model="form.jsdwlx" :data="orgRadioData"></dg-radio-group>
          </span>
        </div>
      </template>

      <template #item-fileHolders>
        <dg-upload v-model="form.fileHolders" :server-url="'./'" size="30m" tip-msg="上传文件限制大小为 30M">
          <el-button type="primary" plain>上传文件</el-button>
          <template slot="fileList" slot-scope="{ type, name, size }">
            <i :class="`dg-icon-${type}`"></i>
            {{ `${name} (${size / 1024})KB` }}
          </template>
        </dg-upload>
      </template>
    </edit-form>

    <div v-footer>
      <!-- <dg-button type="primary" @click="handleSave" v-if="!id">保存为草稿</dg-button> -->
      <dg-button type="primary" @click="handleSave">保存为草稿</dg-button>
      <dg-button type="primary" @click="handleCreate">发布</dg-button>
      <dg-button @click="handleCancel">关闭</dg-button>
    </div>
  </div>
</template>
<script>
import EditForm from '@@/edit-form';
import { mapState } from 'vuex';
import { noticeDetail } from '@/api/notice';
import { treeFather } from '@/utils/common';
import {onPublish} from '@/api/notice';

export default {
  name: 'add-form',
  components: { EditForm },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: [],
      // 表单配置
      form: {
        gglx: '',
        ggbt: '',
        ggzw: '',
        jsdwdm: [],
        fileHolders: [],
        sfcx: '',
        yxqq: '',
        yxqz: '',
        jsdwlx: ''
      },
      formAttrs: {
        labelWidth: '110px'
      },

      formRules: {
        gglx: [{ required: true, message: '请选择公告类型', trigger: 'blur' }],
        ggbt: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        ggzw: [{ required: true, message: '请输入正文内容', trigger: 'blur' }],
        yxqq: [{ required: true, message: '请选择公告时效时间' }],
        jsdwdm: [{ required: true, message: '请选择接收单位', trigger: 'change' }]
      },
      orgRadioData: [
        {
          label: '全选直属单位',
          value: '1'
        },
        {
          label: '全选分局',
          value: '2'
        },
        {
          label: '全选派出所',
          value: '3'
        }
      ]
    };
  },
  computed: {
    ...mapState(['constant']),
    formFields() {
      const _this = this;
      return [
        {
          prop: 'gglx',
          label: '公告类型',
          col: 12,
          tag: 'dg-select',
          tagBind: {
            placeholder: '请选择',
            data: _this.constant.DM_GGXX_GGLX
          }
        },
        {
          prop: 'ggbt',
          label: '标题',
          col: 12,
          tag: 'el-input',
          tagBind: {
            placeholder: '请输入标题'
          }
        },
        {
          prop: 'ggzw',
          label: '正文',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            maxlength:1000, //最多输入1000个中文
            placeholder: '请输入正文内容，最多输入1000个字符'
          }
        },
        {
          prop: 'yxqq',
          label: '公告时效时间'
        },
        {
          prop: 'jsdwdm',
          label: '接收单位',
          tag: 'dg-select',
          tagBind: {
            filterable: true,
            lazyLoad: true,
            data: _this.constant.BM_DEPT,
            multiple: true
          }
        },
        {
          prop: 'fileHolders',
          label: '附件'
        }
      ];
    }
  },
  watch: {
    'form.sfcx'(val) {
      this.formRules.yxqq[0].required = !val;
      if (val === '1') this.time = [];
    },
    'form.jsdwlx'(val) {
      this.formRules.jsdwdm[0].required = !val;
      if (val) {
        this.form.jsdwdm = [];
      }
    },
    time(val) {
      if (val) {
        this.form.yxqq = val[0];
        this.form.yxqz = val[1];
      } else {
        this.form.yxqq = '';
        this.form.yxqz = '';
      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit('close');
    },
    handleSave() {
      this.$emit('success', 0, this.form);
    },
    handleCreate() {
         this.$refs.addForm.$refs.form.validate((valid) => {
           if (valid) {
             this.$emit('success', 1, this.form);
           }
         });
    }
  },
  created() {
    if (this.id) {
      noticeDetail(this.id).then(({ data }) => {
        const jsdwdm = [];
        if (data.jsdwdm) {
          data.jsdwdm.split(',').forEach((item) => {
            jsdwdm.push(treeFather(this.constant.BM_DEPT, item));
          });
        }
        Object.keys(this.form).forEach((key) => {
          this.form[key] = data[key];
        });
        this.form.jsdwdm = jsdwdm;
        if (data.yxqq) {
          this.time = [data.yxqq, data.yxqz];
        }
      });
    }
  },
  mounted() {}
};
</script>
<style scoped lang="scss">
.flex-box {
  display: flex;
  align-items: flex-start;
  &__radio {
    margin-left: 1rem;
  }
}
</style>
